<template>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ info.title }}</h1>
  <button @click="sayHello">说话</button>
  <button @click="changeName">改名字</button>
  <button @click="changeTitle">改标题</button>
</template>

<script>

export default {
  name: 'App',
  components: {},
  //组件中所用到的数据,方法等等均要配置在setup方法中,vue2是配置在data和methods中
  setup() { //如果setup返回一个对象,那么返回的数据和方法在模板中都是可以直接使用的
    //数据
    let name = '张三' //与js定义变量的方法相同
    let age = 18

    //方法
    function sayHello() {
      alert(`我叫${name},我今年${age}`)
    }

    function changeName() {
      name = '曾宇杰'
    }


    //将数据交出去
    return {
      name,
      age,
      sayHello,
      changeName,
    }
  },
  data() {  //vue2中的data也能用,但是不建议混合使用,容易导致配置混乱
    return {
      info: {
        title: 'vue2',
      }
    }
  },
  methods: {
    changeTitle() {
      this.info.title = 'vue3'
    }
  }

}
</script>

<style>

</style>
